<template>
    <div class="page-container">
        <div class="page-row">
            <el-input style="width: 180px; height: 26px; margin-right: 28px;" v-model="queryParam.skuName" placeholder="请输入商品名称" :suffix-icon="Search" @keydown.enter.prevent="bindSearch"></el-input>
            <el-button type="primary" size="small" @click="addGoods">添加商品</el-button> 
            <el-button type="default" size="small" @click="updates">批量修改</el-button>          
        </div>
        <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="skuImg" label="商品图" >
                <template #default="scope">
                    <el-avatar  :src="scope.row.skuImg" />
                </template>
            </el-table-column>
            <el-table-column prop="skuName" label="商品名称" width="180" />
            <el-table-column prop="oneSaleMoney" label="一级分佣(%)" width="180" />
            <el-table-column prop="twoSaleMoney" label="二级分佣(%)" />
            <el-table-column prop="shareIncome" label="邀新分佣(%)" />
            <el-table-column fixed="right" width="200px" label="操作">
                <template #default="scope">
                    <el-button size="small" link type="primary" @click="showUpdate(scope.row)" >编辑</el-button>
                    <el-button size="small" link type="primary" @click="remove(scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="queryParam.current"
              v-model:page-size="queryParam.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="false"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>

        <!-- 添加弹框 -->
        <el-dialog v-model="showAddModal" title="添加商品"  center>
            <el-cascader :options="classify" size="default" clearable :show-all-levels="false" v-model="addSearch.catalogId"
							:props="{value: 'id', label: 'name'}" @change="selectCatalog"></el-cascader>
            <el-input style="width: 180px; height: 26px; margin-left: 28px;" v-model="addSearch.skuName" placeholder="请输入商品名称" :suffix-icon="Search" @keydown.enter.prevent="addSkuList"></el-input>
            <el-table height="60vh" :data="addOrders" style="width: 100%" @selection-change="addSelect">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="skuDefaultImg" label="商品图" >
                    <template #default="scope">
                        <el-avatar  :src="scope.row.skuDefaultImg" />
                    </template>
                </el-table-column>
                <el-table-column prop="skuName" label="商品名称" width="180" />            
                <el-table-column prop="price" label="价格" width="180" />            
            </el-table>
            <div class="page-block">
                <el-pagination
                    v-model:currentPage="addSearch.current"
                    v-model:page-size="addSearch.size"
                    :page-sizes="[10, 20, 30, 40]"
                    :small="true"
                    :disabled="false"
                    :background="false"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="addSearch.total"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChangeAdd"
                    @current-change="handleCurrentChangeAdd"
                />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button :disabled="addSkuInfo.length == 0" @click="submitAdd" type="primary">保 存</el-button>
                    <el-button @click="showAddModal = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>


        <!-- 批量修改 -->
        <el-dialog v-model="showEditModal" title="奖励设置">
            <el-row>
                <span>佣金设置：</span>
                <el-radio-group v-model="updateType">
                    <el-radio :label="0">默认</el-radio>
                    <el-radio :label="1">自定义</el-radio>
                </el-radio-group>                
            </el-row>
            <el-form-item label="一级分佣：" prop="oneSaleMoney" >
                <el-input-number :disabled="updateType == 0" v-model="editParam.oneSaleMoney" :precision="2" :min="0" />
                （%）
            </el-form-item>
            <el-form-item label="二级分佣：" prop="twoSaleMoney">
                <el-input-number :disabled="updateType == 0" v-model="editParam.twoSaleMoney" :precision="2" :min="0" />
                （%）
            </el-form-item>
            <el-form-item label="邀新分佣：" prop="shareIncome">
                <el-input-number :disabled="updateType == 0" v-model="editParam.shareIncome" :precision="2" :min="0" />
                （%）
            </el-form-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editSubmit" type="primary">确 定</el-button>
                    <el-button @click="showEditModal = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>


    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { useSaleApi } from '/@/api/pms/sale/index'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { getCategoryTree,create as createCategory } from '/@/api/pms/category'
import api from '/@/api/commonApi'

export default {
    name: 'goods',
    setup(props) {
        const saleApi = useSaleApi()
        const state =  reactive({
            list: [], // 列表数据
            total: 0, // 总数
            classify: [], // 分类
            showAddModal: false, // 显示添加弹框控制
            showEditModal: false, // 显示批量修改弹框控制
            settingData: {}, // 默认的设置
            editParam: {
                skuIds: [], // 选择修改的关联
                oneSaleMoney: 0, // 一级佣金
                twoSaleMoney: 0, // 二级佣金
                shareIncome: 0, // 二级佣金
                type: 2
            },
            updateType: 0, // 修改类型
            addSkuInfo: [], // 选择添加的skuInfos
            addOrders: [], // 未添加商品数列表
            addSearch: {   // 添加商品到分销
                current: 1,
                size: 10,
                type: 2,    // 分销商品
                total: 0,   // 总数
                catalogId: '', // 分类
                skuName: '',  // 商品名称
            },
            queryParam: {
                current: 1, // 当前页
                size: 10,   // 页大小
                type: 2,    // 分销商品
                skuName: '',// 商品名称
            }
        })
        onMounted(() => {
            getList()
            getCategory()
            getSetting()
        })
        // 获取分销设置
        const getSetting = () => {
            saleApi.getSetting({
                type: 2
            }).then(res => {
                state.settingData = {...res.data}
            })
        }
        // 获取初始数据
        const getList = () => {
            api.saleGoods(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 获取未添加商品数据
        const getAddList = () => {
            saleApi.getNotGoods(state.addSearch).then(res => {
                state.addOrders = res.data.records
                state.addSearch.total = res.data.total
            })
        }
        // 打开添加关联商品弹窗
        const addGoods = () => {
            getAddList()
            state.showAddModal = true
        }
        // 点击提交按钮
        const submitAdd = () => {
            saleApi.addSaleGoods({
                skuInfos: state.addSkuInfo,
                type: state.queryParam.type
            }).then(res => {
                ElMessage.success('添加成功')
                getAddList()
                getList()
            })
        }
        // 打开修改按钮弹窗
        const showUpdate = (val) => {
            state.updateType = 0
            state.editParam.skuIds = []
            state.editParam.oneSaleMoney = val.oneSaleMoney
            state.editParam.twoSaleMoney = val.twoSaleMoney
            state.editParam.shareIncome = val.shareIncome
            state.editParam.skuIds.push(val.id)
            state.showEditModal = true
        }
        // 打开批量修改弹窗
        const updates = () => {
            if(state.editParam.skuIds.length > 0){
                state.updateType = 0
                state.editParam.oneSaleMoney = state.settingData.oneSaleMoney
                state.editParam.twoSaleMoney = state.settingData.twoSaleMoney
                state.editParam.shareIncome = state.settingData.shareIncome
                state.showEditModal = true
            }else{
                ElMessage.warning('请至少选择一个产品！')
            }
        }
        // 确定修改按钮
        const editSubmit = () => {
            saleApi.updateSkuIds(state.editParam).then(res => {
                state.editParam = {
                    skuIds: [], // 选择修改的关联
                    oneSaleMoney: 0, // 一级佣金
                    twoSaleMoney: 0, // 二级佣金
                    shareIncome: 0, // 二级佣金
                    type: 2
                }
                getList()
                state.showEditModal = false
                ElMessage.success('修改成功')
            })
        }
        // 多选订单
        const handleSelectionChange = (val) => {
            console.log(val);
            state.editParam.skuIds = []
            for (let index = 0; index < val.length; index++) {                
                state.editParam.skuIds.push(val[index].id)
            }
        }
        // 添加多选订单
        const addSelect = (val) => {
            console.log(val);
            state.addSkuInfo = val
        }
        // 搜索
        const bindSearch = () => {
            getList()
        }
        // 搜索
        const addSkuList = () => {
            getAddList()
        }
        // 条数修改
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
          }
        // 页码修改
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        // 条数修改
        const handleSizeChangeAdd = e => {
            state.addSearch.size = e
            getAddList()
          }
        // 页码修改
        const handleCurrentChangeAdd = e => {
            state.addSearch.current = e
            getAddList()
        }
        //获取分类
        const getCategory = () => {
            getCategoryTree({isWork: "1"}).then(res => {
                state.classify = res.data
            })
        }
        // 选择分类
        const selectCatalog = (val) => {
            getAddList()
        }
        return {
            ...toRefs(state),
            Plus,
            Search,
            getList,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            bindSearch,
            addGoods,
            updates,
            addSelect,
            handleSizeChangeAdd,
            handleCurrentChangeAdd,
            showUpdate,
            addSkuList,
            getCategory,
            selectCatalog,
            submitAdd,
            editSubmit,
        }
    }
}
</script>

<style scoped lang="scss">
    .page-row{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
</style>